<% content_for :head do %>
    <%= javascript_include_tag 'how_to/jquery.scrollTo.min' %>
    <%= javascript_include_tag 'how_to/jquery.localScroll.min' %>
    <%= javascript_include_tag 'how_to/jquery.treeview' %>
    <%= stylesheet_link_tag 'how_to/jquery.treeview' %>
<% end %>

<div class="faq_content" id="faq_content" style="padding: 0">
  <div id="wrapper" class="">
    <div class="span8">
      <div id="primary">
        <% HowTo::Section.with_content.ordered.each do |section| %>

            <h3 id="<%= dom_id(section) %>"><%= section.name %></h3>
            <ul class="section_menu">
              <% section.contents.each do |content| %>
                  <li>
                    <%= link_to content.title.html_safe, "##{dom_id(content)}" %>
                  </li>
              <% end %>
            </ul>

            <dl class="faq">
              <% section.contents.each do |content| %>
                  <dt id="<%= dom_id(content) %>">
                    <%= content.title.html_safe %>
                  </dt>
                  <dd>
                    <%= content.description.html_safe %>
                  </dd>
              <% end %>
            </dl>
        <% end %>
      </div>

    </div>
    <div class="span4">
      <div id="sidebar">
        <div id="sidebar_content" class="section_menu">
          <h3>Select Category</h3>

          <div id="sidetreecontrol"><a href="?#">Collapse All</a> | <a href="?#">Expand All</a></div>
          <%= sorted_nested_li(HowTo::Section.active, :position, "id='tree_root'") do |section| %>
              <% if section.contents_count > 0 %>
                  <%= link_to section.name, "##{dom_id(section)}" %>
              <% else %>
                  <%= section.name %>
              <% end %>
          <% end %>
        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.container').removeClass('container').addClass('container-fluid');
        $('.row').removeClass('row').addClass('row-fluid');


        $.localScroll.defaults.axis = 'xy';

        /**
         * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
         * also affect the >> and << links. I want every link in the page to scroll.
         */
        $.localScroll({
            target: '#faq_content', // could be a selector or a jQuery object too.
            queue: true,
            duration: 1000,
            hash: true,
            onBefore: function (e, anchor, $target) {
                $(anchor).css('paddingTop', $('#sidebar').offset().top + 'px');
                // The 'this' is the settings object, can be modified
            },
            onAfter: function (anchor, settings) {
                // The 'this' contains the scrolled element (#content)
            }
        });
        $.localScroll();

        $("#tree_root").treeview({
            collapsed: true,
            animated: "medium",
            control: "#sidetreecontrol",
            persist: "location"
        });
    });

</script>

<style type="text/css">
    body {
        direction: ltr;
    }

    .faq_content .row-fluid {
        background: #eee;
    }

    .faq_content {
        font: 14px/24px helvetica, arial, sans-serif;
        color: #666666;
        padding-left: 20px !important;
    }

    .faq_content a:focus {
        outline: 1px dotted;
    }

    .faq_content hr {
        border: 0 #ccc solid;
        border-top-width: 1px;
        clear: both;
        height: 0;
    }

    .faq_content h1 {
        font-size: 25px;
        line-height: 25px;
        font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
    }

    .faq_content h2 {
        font-size: 23px;
        line-height: 23px;
    }

    .faq_content h3 {
        font-size: 20px;
        line-height: 21px;
    }

    .faq_content h4 {
        font-size: 19px;
        line-height: 19px;
    }

    .faq_content h5 {
        font-size: 17px;
        line-height: 17px;
    }

    .faq_content h6 {
        font-size: 15px;
        line-height: 15px;
    }

    .faq_content h1, .faq_content h2, .faq_content h3, .faq_content h4, .faq_content h5, .faq_content h6 {
        color: #000000;
    }

    .faq_content ol {
        list-style: decimal;
    }

    .faq_content ul {
        list-style: disc;
    }

    .faq_content li {
        margin-left: 15px;
    }

        /** BASIC STYLING **/

    .faq_content  div#wrapper {
        /*width: 960px;*/
        margin: 0 auto;
        position: relative;
    }

    .faq_content  div#primary {
        margin-top: 10px;

    }

    .faq_content  h1#title {
        text-align: center;
        font-size: 50px;
        line-height: 70px;
        margin-top: 20px;
    }

    .faq_content a {
        color: #0986e3;
    }

    .faq_content ul.section_menu {
        background: #EDEDED;
        padding: 10px 0px;
        margin: 0 !important;
    }

    .faq_content dl.faq {
        margin-bottom: 30px;
    }

    .faq_content dl.faq dt {
        font-weight: bold;
        color: #000000;
        padding: 15px 0 5px 0;
        display: block;
    }

    .faq_content dl.faq dd {
        padding-bottom: 25px;
        border-bottom: 1px solid #cccccc;
        display: block;
    }

    .faq_content #sidebar {

    }

    .faq_content #sidebar_content {
        position: fixed;
        /*top: 0px;*/
        /* just used to show how to include the margin in the effect */
        width: 31.5%;
    }

    .faq_content #sidebar_content ul li {
        list-style: none;
        margin: 0px 5px;
    }

    .faq_content #sidebar_content .treeview ul {
        background: none;
    }

    .faq_content #sidebar_content.fixed {
        position: fixed;
        top: 0;
        width: 30.5%;
    }

        /************************************/
    .content-wapper {
        position: relative;
    }

    .welcome ul {
        padding: 0;
        margin: 0;
    }

    .welcome ul li {
        list-style: none;
        display: inline;

    }

    body.rtl {
        direction: rtl;
    }

        /*************Bootstrap property**********/
    .rtl .row-fluid [class*="span"], .rtl .navbar .brand {
        float: right !important;
    }

    .rtl .pull-right {
        float: left;
    }

        /*************Bootstrap property**********/

    .rtl  .faq_content .row-fluid {
        background: #eee;
    }

    .rtl  .faq_content {
        font: 14px/24px helvetica, arial, sans-serif;
        color: #666666;
        padding-right: 20px !important;
        padding-left: 0 !important;
    }

    .rtl  .faq_content li {
        margin-right: 15px;
    }

    .rtl  .faq_content dl.faq dt {
        font-weight: bold;
        color: #000000;
        padding: 15px 0 5px 0;
        display: block;
    }
</style>

